<template>
  <div id="app">
    <!-- 标题 -->
    <h1>文件上传</h1>
    <p>说明：目前只支持pdf样式预览，其他文件预览需要配合后端实现文件上传和 URL 生成</p>
    <p>ps：选择文件时按住ctrl可以多选文件</p>
    <!-- 上传组件 -->
    <el-upload
      class="upload-demo"
      action="#"
      :on-change="handleFileChange"
      :auto-upload="false"
      multiple
    >
      <el-button size="small" type="primary">选择文件</el-button>
    </el-upload>
    <!-- 已选择文件列表 -->
    <el-table :data="selectedFiles" stripe class="center-table"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border>
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 预览按钮 -->
          <el-button size="mini" type="primary" @click="previewFile(scope.row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 一键上传按钮 -->
    <el-button type="success" @click="uploadAllFiles" style="margin-top: 30px;">一键上传</el-button>
  </div>
</template>

<script>
import axios from 'axios';
import mammoth from'mammoth';

export default {
  data() {
    return {
      selectedFiles: []
    };
  },
  methods: {
    // 处理文件选择事件
    handleFileChange(file, fileList) {
      this.selectedFiles.push(file);
    },
    // 预览文件
    async previewFile(file) {
      const fileUrl = URL.createObjectURL(file.raw);
      const fileType = file.raw.type;
      switch (fileType) {
        case 'application/pdf':
          // 直接预览 PDF
          window.open(fileUrl, '_blank');
          break;
        case 'application/msword':
          // 预览 DOC 文件
          await this.previewDoc(file.raw);
          break;
        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
          // 预览 DOCX 文件
          await this.previewDocx(file.raw);
          break;
        case 'application/vnd.ms-excel':
        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
          // 预览 Excel 文件，使用在线预览服务
          this.previewExcel(fileUrl);
          break;
        default:
          this.$message.error('该文件类型不支持预览');
      }
    },
    // 预览 DOC 文件
    async previewDoc(file) {
      try {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        await new Promise((resolve) => {
          reader.onload = async () => {
            const result = await mammoth.convertToHtml({ arrayBuffer: reader.result });
            const html = result.value;
            const newWindow = window.open('', '_blank');
            newWindow.document.write(html);
            newWindow.document.close();
            resolve();
          };
        });
      } catch (error) {
        this.$message.error('预览 DOC 文件失败');
      }
    },
    // 预览 DOCX 文件
    async previewDocx(file) {
      try {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        await new Promise((resolve) => {
          reader.onload = async () => {
            const result = await mammoth.convertToHtml({ arrayBuffer: reader.result });
            const html = result.value;
            const newWindow = window.open('', '_blank');
            newWindow.document.write(html);
            newWindow.document.close();
            resolve();
          };
        });
      } catch (error) {
        this.$message.error('预览 DOCX 文件失败');
      }
    },
    // 预览 Excel 文件
    previewExcel(fileUrl) {
      const officeViewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`;
      window.open(officeViewerUrl, '_blank');
    },
    // 一键上传所有文件
    async uploadAllFiles() {
      if (this.selectedFiles.length === 0) {
        this.$message.warning('请先选择要上传的文件');
        return;
      }
      try {
        const formData = new FormData();
        this.selectedFiles.forEach((file) => {
          formData.append('files', file.raw);
        });
        const response = await axios.post('http://your-backend-api-url', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        this.$message.success('文件上传成功');
        this.selectedFiles = [];
      } catch (error) {
        this.$message.error('文件上传失败');
        console.error('文件上传失败:', error);
      }
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif; /* 简化字体 */
  text-align: center;
  color: #333; /* 简化颜色 */
  margin-top: 30px; /* 减少顶部边距 */
}

.upload-demo {
  margin-bottom: 20px; /* 给上传组件添加底部边距 */
}

.center-table {
  width: 80%; /* 设置表格宽度为80% */
  margin: 0 auto; /* 使表格居中 */
}
</style>
